<template>
	<view class="container">
		<view class="content">
			<view class="ticketView">
				<view class="ticketName">{{ticketInfo.ticketName}}</view>
				<view class="qrcodeView">
					<canvas id="myQrcode" canvas-id="myQrcode" style="width: 150px;height: 150px;"></canvas>
				</view>
			</view>
			<view class="ticketInfo">
				<view class="desc checkNumber">检票次数：</view>
				<view class="checkQuantity">{{ticketInfo.restCheckQuantity}}</view>
			</view>
			<view class="ticketInfo">
				<view class="desc">游玩日期：</view>
				<view class="visitDate">{{ticketInfo.visitDate}}</view>
			</view>
			
			<view class="detailView">
				<view class="title">检票信息</view>
				<view class="noData" v-if="checkList.length == 0">--暂无数据--</view>
				<view class="visitorList">
					<view class="visitor" v-for="(item,key) in checkList">
						<view class="phone">检票次数：{{item.checkQuantity}}</view>
						<view class="idCard">检票时间：{{item.checkTime}}</view>
					</view>
				</view>
			</view>
			
			<view class="detailView">
				<view class="title">游客信息</view>
				<view class="visitorList">
					<view class="visitor" v-for="(item,key) in visitors">
						<view class="name">姓名：{{item.userName}}</view>
						<view class="phone">手机号：{{item.phone}}</view>
						<view class="idCard">证件号：{{item.certNumber}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="refundView">
			<view class="refundBtn" @click="refundClick()">申请退款</view>
		</view>
	</view>
</template>

<script>
	const qrcode = require('../../common/weapp.qrcode.min.js');
	export default {
		data() {
			return {
				ticketInfo: {},
				visitors: [],
				checkList: []
			}
		},
		onLoad(options) {
			let that = this;
			uni.request({
				url: 'https://boss.smart-ideas.com.cn/ticketApi/order/getDetailsById',
				method: 'GET',
				data: {
					ticketOrderId: options.ticketOrderId
				},
				success: (res) => {
					let ticketInfo = res.data.data;
					that.ticketInfo = ticketInfo;
					qrcode({
					  width: 150,
					  height: 150,
					  canvasId: 'myQrcode',
					  text: ticketInfo.checkCode
					})
				}
			})
			
			uni.request({
				url: 'https://boss.smart-ideas.com.cn/ticketApi/orderVisitors/getOrderVisitors',
				method: 'GET',
				data: {
					ticketOrderId: options.ticketOrderId
				},
				success: (res) => {
					console.log(res);
					that.visitors = res.data.data;
				}
			})
			
			uni.request({
				url: 'https://boss.smart-ideas.com.cn/ticketApi/orderCheck/getCheckList',
				method: 'GET',
				data: {
					ticketOrderId: options.ticketOrderId
				},
				success: (res) => {
					console.log(res);
					that.checkList = res.data.data;
				}
			})
		},
		methods: {
			refundClick(){
				let that = this;
				uni.showModal({
					content: '是否申请退款？',
					success: (res) => {
						if(res.confirm){
							let visitorIds = [];
							that.visitors.forEach(function(value, key){
								visitorIds.push(value.id);
							})
							uni.request({
								url: 'https://boss.smart-ideas.com.cn/ticketApi/orderRefund/refundByWeb',
								method: 'POST',
								data: {
									refundWay: 'mini',
									ticketOrderId: that.ticketInfo.ticketOrderId,
									refundMoney: that.ticketInfo.totalPrice,
									refundDescription: '微信小程序用户手动退款',
									visitorIds: visitorIds,
									refundQuantity: that.ticketInfo.buyQuantity
								},
								success: (res) => {
									if(res.data.success){
										uni.showModal({
											content: res.data.message
										})
										setTimeout(function(){
											uni.navigateBack();
										}, 1000);
									}else{
										uni.showModal({
											content: res.data.message
										})
									}
									
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container{
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
		padding-bottom: 100rpx;
	}
	.content{
		box-sizing: border-box;
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.ticketView{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ddd;
		margin-bottom: 20rpx;
	}
	.ticketName{
		font-size: 32rpx;
		color: #00B3FD;
		text-align: center;
		width: 100%;
		margin-bottom: 10rpx;
	}
	.qrcodeView{
		width: 170px;
		height: 170px;
		border: 3px solid #00B3FD;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.ticketInfo{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		padding: 10rpx;
	}
	.title{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		padding-left: 20rpx;
		border-left: 8rpx solid #00B3FD;
		line-height: 30rpx;
	}
	
	.detailView{
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.visitor{
		background-color: #f5f5f5;
		padding: 20rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 50rpx;
	}
	
	.noData{
		width: 100%;
		line-height: 70rpx;
		background-color: #f5f5f5;
		color: #666;
		font-size: 28rpx;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.refundView{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx;
	}
	.refundBtn{
		background-color: #fff;
		border-radius: 10rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
	
</style>